<template>
  <a-modal v-model:visible.sync="store.state.user.add_status" title="用户新增" @ok="handleOk" okText="确认" cancelText="取消"
           @cancel="handle_cancel">
    <div class="row_box">
      <div class="column_box">
        <span>用户名</span>
        <a-input v-model:value="formState.params.userName" placeholder="请输入用户名"/>
      </div>
      <div class="column_box">
        <span>真实姓名</span>
        <a-input v-model:value="formState.params.realName" placeholder="请输入真实姓名"/>
      </div>

      <!--      <div class="column_box">-->
      <!--        <span>岗位</span>-->
      <!--        <a-input v-model:value="formState.params.realName" placeholder="请输入岗位名称"/>-->
      <!--        <a-select-->
      <!--            v-model:value="formState.params.grantPostIdList"-->
      <!--            style="width: 100%"-->
      <!--            @focus="focus('workshop')"-->
      <!--            ref="select"-->
      <!--            @change="handleChange"-->
      <!--            mode="multiple"-->
      <!--        >-->
      <!--          <a-select-option v-for="(item,index) in dic_data.grantPostIdList" :key="index" :value="item.dictId">-->
      <!--            {{ item.code }}-->
      <!--          </a-select-option>-->
      <!--        </a-select>-->
      <!--      </div>-->

      <div class="column_box">
        <span>部门</span>
        <a-select
            v-model:value="GrantOrgIdList"
            style="width: 100%"
            @focus="get_department_list('department')"
            ref="select"
            @change="get_department_list('department')"
        >
          <a-select-option v-for="(item,index) in dic_data.partList" :key="index" :value="item.orgId">{{ item.orgName }}
          </a-select-option>
        </a-select>
      </div>

      <div class="column_box">
        <span>生产车间</span>
        <a-select
            v-model:value="formState.params.workshop"
            style="width: 100%"
            @focus="focus('workshop')"
            ref="select"
            @change="handleChange"
        >
          <a-select-option v-for="(item,index) in dic_data.workshop" :key="index" :value="item.dictId">{{ item.name }}
          </a-select-option>
        </a-select>
      </div>

      <div class="column_box">
        <span>角色</span>
        <a-select
            v-model:value="formState.params.roleId"
            style="width: 100%"
            @focus="get_role_data('role')"
            ref="select"
            @change="handleChange"
        >
          <a-select-option v-for="(item,index) in dic_data.grantRoleIdList" :value="item.roleId">{{ item.roleName }}
          </a-select-option>
        </a-select>
      </div>
      <div class="column_box">
        <span>手机号码</span>
        <a-input v-model:value="formState.params.phone" placeholder="请输入手机号码"/>
      </div>
      <div class="column_box">
        <span>性别</span>
        <a-select
            v-model:value="formState.params.sex"
            style="width: 100%"
            @focus="focus('sex')"
            ref="select"
            @change="handleChange"
        >
          <a-select-option v-for="(item,index) in dic_data.sex" :key="index" :value="item.dictId">{{ item.name }}
          </a-select-option>
        </a-select>
      </div>
      <div class="column_box">
        <span>公司名称</span>
        <a-input v-model:value="formState.params.companyName" placeholder="请输入公司名称"/>
      </div>
      <div class="column_box">
        <span>公司地址</span>
        <a-input v-model:value="formState.params.address" placeholder="请输入公司地址"/>
      </div>
    </div>
  </a-modal>
</template>

<script>
import {defineComponent, getCurrentInstance, reactive, ref} from 'vue';
import {useStore} from "vuex"
import {editUser, get_department} from "@/api/user"
import {message} from "ant-design-vue";
import {get_dic_data} from "@/api/dic/data"
import {get_role_all_list} from "@/api/role"

const params_init = {
  "userId": 0,
  "userName": "",
  "password": "",
  "phone": "",
  "email": "",
  "pic": "",
  "address": "",
  "realName": "",
  "sex": null,
  "birthDate": "",
  "nickName": "",
  "age": null,
  "companyName": "",
  "createUserId": 0,
  "status": null,
  "grantRoleIdList": [],
  "grantClassIdList": [],
  "grantPostIdList": []
};

export default defineComponent({

  setup(props, context) {
    // const {ctx} = getCurrentInstance()
    const store = useStore()
    const add_data = reactive({
      visible: store.state.user.add_status
    })

    const GrantOrgIdList = ref(null);

    const formState = reactive({
      params: {
        "userId": 0,
        "userName": "",
        "password": "",
        "phone": "",
        "email": "",
        "pic": "",
        "address": "",
        "realName": "",
        "sex": null,
        "birthDate": "",
        "nickName": "",
        "age": null,
        "companyName": "",
        "createUserId": 0,
        "status": null,
        "grantRoleIdList": [],
        "grantClassIdList": [],
        "grantPostIdList": [],
        "GrantOrgIdList": []
      },
      dic_data_params: {
        dictCode: ""
      }
    });

    const dic_data = reactive({
      sex: [],
      workshop: [],
      grantClassIdList: [],
      grantRoleIdList: [],
      grantPostIdList: [],
      partList: []
    })

    const handleOk = () => {
      store.commit("SET_ADD_USER", false)
      add_data_request()

    };
    const handle_cancel = () => {
      store.commit("SET_ADD_USER", false)
    }

    function show_model() {
      add_data.visible = true
    }

    const request_dic_data = async (code) => {
      let params = {
        dictCode: code
      }
      const res = await get_dic_data(params)
      if (res.code === 1) {
        return res.data
      }
      return [];
    }

    const focus = async (key) => {
      dic_data[key] = await request_dic_data(key)
    };

    const handleChange = (value) => {
      console.log(`selected ${value}`);
    };
    const add_data_request = async () => {
      let params = {
        "userId": 0, //
        "userName": formState.params.userName,// 用户名
        "password": "123456",// 密码
        "phone": formState.params.phone,// 手机号码
        "email": "",// 邮箱
        "pic": "",//头像
        "address": formState.params.address,// 地址
        "realName": formState.params.realName,//真实姓名
        "sex": formState.params.sex,// 性别
        "birthDate": "",//
        "nickName": "",//
        "age": 0,//年龄
        "provinceID": 0,//
        "cityID": 0,//
        "countyID": 0,//
        "companyName": formState.params.companyName,//
        "createUserId": 0,//
        "status": 0
      }
      if (!formState.params.sex) {
        message.error("请完善信息")
        return
      }
      const res = await editUser(params)
      console.log(res)
      if (res.code === 1) {
        message.success('数据新增成功');
        formState.params = params_init
        context.emit("re_flash:re_flash", "")
        return
      }
      message.warning(res.message);
    }

    const get_role_data = async () => {
      const res = await get_role_all_list()
      console.log("角色列表", res)
      if (res.code === 1) {
        dic_data.grantRoleIdList = res.data
        return
      }
    }

    /**
     *
     * 获取部门
     */
    const get_department_list = async (val) => {
      const res = await get_department()

      if (res.code === 1) {
        dic_data.partList = res.data;
      }
    }
    return {
      handleOk,
      handle_cancel,
      add_data,
      dic_data,
      show_model,
      store,
      formState,
      handleChange,
      focus,
      get_role_data,
      get_department_list,
      GrantOrgIdList
    };
  },
});
</script>
<style lang="scss" scoped>

</style>
